#{extends 'layout.html' /}
#{set title:messages.get('crud.show.title', type.modelName) /}
<script type="text/javascript">
	function buscarAlimento() {
		$.ajax({
			url: "/dietas/buscarAlimento/"+$("#textAlimento").val(),
			cache: false
			}).done(function( resultado ) {
				alert(resultado);
				$("#resultadoAlimentos").html(resultado);
				//se debe recorrer el resultado y mostrar por pantalla
		});
	}
</script>

<div id="crudShow" class="${type.name}">

	<h2 id="crudShowTitle">${title}</h2>
	${plan.nombre} - ${plan.dietas}
	
	<ul>
    	#{list items:plan.dietas, as:'dieta'}
        	<li>${dieta.fecha}</li>
    	#{/list}
	</ul>
	
    	<div id="flexLeft">
        	<div id="comidas">
        		#{form action:@registrarIngerido(plan.getDietas().get(0).getId(), 1, 1, 'DESAYUNO'), enctype:'multipart/form-data', metod:POST}
				<h3><a href="#">Desayuno</a></h3>
                <div class="placeholder">
                	#{list plan.getDietas().get(0).getAlimentosTipoComida(), as:'comida'}
	                	<div class="alimentoBig">
    	                	<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
<!--                        <div class="alimentoImage"><img src="img/icons/Milk-icon.png" alt="Leche" /></div> -->
<!--                     	<h3>Leche</h3> -->
						<h3>${comida.nombre}</h3>
						<input type="hidden" name="alimentos" value="${comida.id}">
        	            </div>
            	     #{/list}
                	<div class="clearfix"></div>
                </div>
                <p class="crudButtons">
            		<input type="submit" name="saveDesayuno" value="Registrar ingeridos Desayuno" />
		        </p>
		    	#{/form}
                
<!--                 <h3><a href="#">Colacion</a></h3> -->
<!--                 <div class="placeholder"> -->
<!--                 	<div class="alimentoBig"> -->
<!--                     	<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div> -->
<!--                         <div class="alimentoImage"><img src="img/icons/Grapefruit-icon.png" alt="Fruta" /></div> -->
<!--                     	<h3>Fruta</h3> -->
<!--                     </div> -->
<!--                 	<div class="clearfix"></div> -->
<!--                 </div> -->
                
<!--                 <h3><a href="#">Almuerzo</a></h3> -->
<!--                 <div class="placeholder"> -->
<!--                 	<div class="alimentoBig"> -->
<!--                     	<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div> -->
<!--                         <div class="alimentoImage"><img src="img/icons/Salad-icon.png" alt="Ensalada" /></div> -->
<!--                     	<h3>Ensalada</h3> -->
<!--                     </div> -->
<!-- 					<div class="clearfix"></div> -->
<!--                 </div> -->
                                
            </div>
        </div>
	
	<div id="flexRight">
       	<div id="indicador">1400 / 2000</div>
       	<div id="frecuentes">
          	<h2>ALIMENTOS FRECUENTES</h2>
          	<section>
          		#{list items:frecuentes, as:'frecuente'}
          			<div class="alimentoSmall">
                     		<div class="deleteBtn"><a href="#" class="deleteAlimento">u</a></div>
                  		<h3>${frecuente.nombre}</h3>
                  	</div>
		    #{/list}
            		<div class="clearfix"></div>
           </section>
		</div>
    </div>
    
    <div id="flexRight2">
       	<div id="buscador">
          	<h2>BUSCADOR ALIMENTOS</h2>
          	<input type="text" id="textAlimento" title="Buscar alimentos" />
          	<button id="buscarAlimento" onclick="buscarAlimento();"> Buscar</button>
          	<!-- Poner llamada ajax -->
          	<div id="resultadoAlimentos">
          	</div>
		</div>
    </div>
    
    
	
	<div class="objectForm">
	#{form action:@registrarIngerido(plan.getDietas().get(0).getId(), 1, 1), enctype:'multipart/form-data'}
<!-- 		<div id="crudListTable"> -->
<!-- 			#{crud.table fields:['plan.nombre', 'plan.dietas']} -->
<!-- 				#{crud.custom 'plan.nombre'} -->
<!-- 					${object.nombre}  -->
<!--   				#{/crud.custom} -->
  				
<!--   				#{crud.custom 'plan.dietas'} -->
<!--   					${object.dietas} -->
<!--   				#{/crud.custom} -->
					
<!-- 			#{/crud.table} -->
<!-- 		</div>		 -->

        <p class="crudButtons">
            <input type="submit" name="_save" value="Registrar ingeridos" />
            <input type="submit" name="_saveAndContinue" value="&{'crud.saveAndContinue', type.modelName}" />
        </p>
    #{/form}
    </div>

<!--     #{form @delete(plan._key())} -->
<!--         <p class="crudDelete"> -->
<!--             <input type="submit" value="&{'borrar', type.modelName}" /> -->
<!--         </p> -->
<!--     #{/form} -->

</div>